import { Popover } from "antd";
import type { ComponentType } from "../../types/componentType";
import { componentMap } from "@/components/Table/componentMap";
import React from "react";
// import { pick } from "lodash-es";

export interface ComponentProps {
	component: ComponentType;
	rule: boolean;
	popoverOpen: boolean;
	ruleMessage: string;
	getPopupContainer?: Fn;
}

export function CellComponent({
	component = "Input",
	rule = true,
	ruleMessage,
	popoverOpen,
	getPopupContainer,
	...props
}: ComponentProps) {
	const Comp = componentMap.get(component);

	const DefaultComp = React.createElement(Comp, {
		component,
		rule,
		ruleMessage,
		popoverOpen,
		getPopupContainer,
		...props
	});
	if (!rule) return DefaultComp;

	return React.createElement(
		Popover,
		{
			overlayClassName: "edit-cell-rule-popover",
			open: !!popoverOpen,
			...(getPopupContainer ? { getPopupContainer } : {}),
			content: () => ruleMessage
		},
		[DefaultComp]
	);
}
